<template>

  <div>

    <Row>
      <Card>
        <div class="top-tool-bar clearfix">

          <Select v-model="model1" style="width:120px" placeholder="需求站类别">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          &nbsp;&nbsp;&nbsp;&nbsp;订单生成时间&nbsp;&nbsp;
          <Date-picker type="date" placeholder="选择日期" style="width: 120px"></Date-picker>
          &nbsp;&nbsp; 到&nbsp;&nbsp;
          <Date-picker type="date" placeholder="选择日期" style="width: 120px"></Date-picker>
          &nbsp;&nbsp;&nbsp;&nbsp;订单状态&nbsp;&nbsp;
          <Select v-model="model1" style="width:120px" placeholder="订单状态">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>

          <Input v-model="value" placeholder="请输入..." style="width: 120px"></Input>

          <Button type="primary" icon="ios-search" loading @click.prevent.stop="getList()">搜索</Button>

          <Button type="primary" class="pull-right margin-left-10" @click.prevent.stop="del()">删除</Button>

          <Button type="primary" class="pull-right margin-left-10" @click.prevent.stop="showAdd()">增加</Button>

          <Button type="primary" class="pull-right margin-left-10">智能配送</Button>

        </div>


        <Table border :columns="columns" :data="list"></Table>

        <Page :total="total" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>

      </Card>
    </Row>

    <!--新建订单弹窗-->
    <Modal
      v-model="showAddOrderModal"
      title="新建订单"
      ok-text="保存"
      width="650"
      @on-cancel="cancelAddOrderModal">
      <Form :model="detail" label-position="right" :label-width="100">
        <Row>
          <Col span="12">
          <Form-item label="需求单编号">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="站点类别">
            <Select v-model="model1">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <Form-item label="站点名称">
            <Select v-model="model1">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="站点省市">
            <Row>
              <Col span="10">
              <Select v-model="model1">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
              </Col>
              <Col span="2">
              省</Col>
              <Col span="10">
              <Select v-model="model1">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
              </Col>
              <Col span="2">
              市</Col>
            </Row>
          </Form-item>
          </Col>
        </Row>
        <Form-item label="站点地址">
          <Input v-model="detail.input2"></Input>
        </Form-item>
        <Row>
          <Col span="12">
          <Form-item label="站负责人">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="联系方式">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <Form-item label="接口标准">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="储罐容量">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <Form-item label="需求量">
            <Input v-model="detail.input1" placeholder="0-50(m3)"></Input>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="需求时间">
            <Row>
              <Col span="12">
              <Date-picker type="date" placeholder="选择日期"></Date-picker>
              </Col>
              <Col span="12">
              <Time-picker type="time" placeholder="选择时间"></Time-picker>
              </Col>
            </Row>
          </Form-item>
          </Col>
        </Row>
      </Form>
    </Modal>

    <!--订单详情弹窗-->
    <Modal
      v-model="showOrderDetailModal"
      title="订单详情"
      ok-text="保存"
      width="650"
      @on-cancel="cancelOrderDetailModal">
      <Form :model="detail" label-position="right" :label-width="100">
        <Row>
          <Col span="12">
          <Form-item label="需求单编号">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="站点类别">
            <Select v-model="model1">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <Form-item label="站点名称">
            <Select v-model="model1">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="站点省市">
            <Row>
              <Col span="10">
              <Select v-model="model1">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
              </Col>
              <Col span="2">
              省</Col>
              <Col span="10">
              <Select v-model="model1">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
              </Col>
              <Col span="2">
              市</Col>
            </Row>
          </Form-item>
          </Col>
        </Row>
        <Form-item label="站点地址">
          <Input v-model="detail.input2"></Input>
        </Form-item>
        <Row>
          <Col span="12">
          <Form-item label="站负责人">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="联系方式">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <Form-item label="接口标准">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="储罐容量">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <Form-item label="需求量">
            <Input v-model="detail.input1" placeholder="0-50(m3)"></Input>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="需求时间">
            <Row>
              <Col span="12">
              <Date-picker type="date" placeholder="选择日期"></Date-picker>
              </Col>
              <Col span="12">
              <Time-picker type="time" placeholder="选择时间"></Time-picker>
              </Col>
            </Row>
          </Form-item>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <Form-item label="订单生成方式">
            <Select v-model="model1">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="建立时间">
            <Date-picker type="date" placeholder="选择日期"></Date-picker>
          </Form-item>
          </Col>
        </Row>

      </Form>
      <div slot="footer"></div>
    </Modal>

    <!--修改订单弹窗-->
    <Modal
      v-model="showModOrderModal"
      title="修改订单"
      ok-text="保存"
      width="650"
      @on-cancel="cancelModOrderModal">
      <Form :model="detail" label-position="right" :label-width="100">
        <Row>
          <Col span="12">
          <Form-item label="需求单编号">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="站点类别">
            <Select v-model="model1">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <Form-item label="站点名称">
            <Select v-model="model1">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="站点省市">
            <Row>
              <Col span="10">
              <Select v-model="model1">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
              </Col>
              <Col span="2">
              省</Col>
              <Col span="10">
              <Select v-model="model1">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
              </Col>
              <Col span="2">
              市</Col>
            </Row>
          </Form-item>
          </Col>
        </Row>
        <Form-item label="站点地址">
          <Input v-model="detail.input2"></Input>
        </Form-item>
        <Row>
          <Col span="12">
          <Form-item label="站负责人">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="联系方式">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <Form-item label="接口标准">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="储罐容量">
            <Input v-model="detail.input1"></Input>
          </Form-item>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <Form-item label="需求量">
            <Input v-model="detail.input1" placeholder="0-50(m3)"></Input>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="需求时间">
            <Row>
              <Col span="12">
              <Date-picker type="date" placeholder="选择日期"></Date-picker>
              </Col>
              <Col span="12">
              <Time-picker type="time" placeholder="选择时间"></Time-picker>
              </Col>
            </Row>
          </Form-item>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <Form-item label="订单生成方式">
            <Select v-model="model1">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          </Col>
          <Col span="12">
          <Form-item label="建立时间">
            <Date-picker type="date" placeholder="选择日期"></Date-picker>
          </Form-item>
          </Col>
        </Row>

      </Form>
    </Modal>
  </div>

</template>

<style scoped>

</style>

<script type="text/ecmascript-6">

    import util from '@/libs/util';

  export default {
    beforeMount () {

    },
    mounted() {
      //this.getList();
    },
    data () {
      return {
        detail: {
          input1: '',
          input2: '',
        },
        showAddOrderModal: false,
        showOrderDetailModal: false,
        showModOrderModal: false,
        loading: true,
        showTip: false,
        cityList: [
          {
            value: 'beijing',
            label: '北京市'
          },
          {
            value: 'shanghai',
            label: '上海市'
          },
          {
            value: 'shenzhen',
            label: '深圳市'
          },
          {
            value: 'hangzhou',
            label: '杭州市'
          },
          {
            value: 'nanjing',
            label: '南京市'
          },
          {
            value: 'chongqing',
            label: '重庆市'
          }
        ],
        model1: '',
        value: '',
        option: {},
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '需求订单编号',
            key: 'name1'
          },
          {
            title: '需求站类型',
            key: 'name2'
          },
          {
            title: '站点名称',
            key: 'name3'
          },
          {
            title: '站点地址',
            key: 'name4'
          },
          {
            title: '需求量',
            key: 'name5'
          },
          {
            title: '需送达时间',
            key: 'name6'
          },
          {
            title: '订单送达时间',
            key: 'name7'
          },
          {
            title: '状态',
            key: 'name8'
          },
          {
            title: '订单生成方式',
            key: 'name9'
          },
          {
            title: '操作',
            key: 'action',
            width: 140,
            align: 'center',
            render: (h, params) => {
              if (params.row.name9 == '自动') {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        console.log(JSON.stringify(params));
                        this.showOrderDetail();
                      }
                    }
                  }, '查看'),
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.$Modal.confirm({
                          title: '确认对话框标题',
                          content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
                          onOk: () => {
                            this.$Message.info('点击了确定');
                          },
                          onCancel: () => {
                            this.$Message.info('点击了取消');
                          }
                        });
                      }
                    }
                  }, '删除')
                ]);
              } else {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        console.log(JSON.stringify(params));
                        this.showOrderDetail();
                      }
                    }
                  }, '查看'),
                  h('Button', {
                    props: {
                      type: 'success',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        console.log(JSON.stringify(params));
                        this.showModOrder()
                      }
                    }
                  }, '修改')
                ]);
              }

            }
          }
        ],
        list: [
          {
            name1: 111200450,
            name2: '加气站',
            name3: 'XXLNG加气站',
            name4: '嘉兴市平湖市乍浦镇东方大道123号',
            name5: '24m³',
            name6: '2017-07-14 15：00',
            name7: '2017-07-11 17：37：58',
            name8: '待处理',
            name9: '手动',
          },
          {
            name1: 111200450,
            name2: '加气站',
            name3: 'XXLNG加气站',
            name4: '嘉兴市平湖市乍浦镇东方大道123号',
            name5: '24m³',
            name6: '2017-07-14 15：00',
            name7: '2017-07-11 17：37：58',
            name8: '待处理',
            name9: '自动',
          },
        ],
        total: 40,
        pageSize:10,
        pageNum:1
      }
    },
    methods: {
      showAdd(){
        this.showAddOrderModal = true;
      },
      cancelAddOrderModal(){
        this.showAddOrderModal = false;
      },
      showOrderDetail(){
        this.showOrderDetailModal = true;
      },
      cancelOrderDetailModal(){
        this.showOrderDetailModal = false;
      },
      showModOrder(){
        this.showModOrderModal = true;
      },
      cancelModOrderModal(){
        this.showModOrderModal = false;
      },
      changePage(num){
        this.pageNum = num;
        this.getList(this.pageSize,num)
      },
      changeSize(size){
        this.pageSize = size;
        this.getList(size,this.num)
      },
      getList (size,num) {
        let $this = this;
        let params = {
          pageSize:size,
          pageStart:num
        };
        $this.$emit('showLoading');
        api.fetchPost(api.path.in_theaters, params).then((data) => {
          //console.log(JSON.stringify(data));
          $this.$emit('hideLoading');
          console.log(JSON.stringify(data));
        }).catch(err => {
          $this.$emit('hideLoading');
          this.$Message.error(err);
        })
      },
      goToDetail(params){
        this.$router.push({path: `/movie/detail/${params.row.id}`});
      }
    },
    components: {}
  };
</script>
